<!-- 首页 -->
<template>
  <view class="home-wrap u-m-b-20">
    <view v-if="isConnected && isRefresh" class="content-box">
      <!-- 导航栏 -->
      <shopro-navbar :isBack="false" :isOrder="5">
        <view class="u-flex-1 u-flex u-col-center" slot="content">
          <u-search shape="square" action-text=""  :disabled="true"  @click="$Router.push({ path: '/pages/index/huixuan_good', query: { id: '' } })" :action-style="{'display':'none'}" placeholder="请输入关键字"  :showAction="false" height="60"></u-search>
          <view class="u-flex right-solt">
            <view class="goshopcar" @click="$Router.push('/pages/index/cart') ">
              <image  style="width: 36rpx;height: 36rpx;"  src="@/static/images/Frame.png"></image>
              <text class="gouwuche">购物车</text>
            </view>
<!--            <view class="goqiandao">-->
<!--              <image style="width:  54rpx;height:  52rpx;" src="@/static/images/Group1898.png"></image>-->
<!--            </view>-->
          </view>
        </view>

      </shopro-navbar>
      <!-- 自定义模块 -->
      <view class="template-box">
        <block v-for="(item, index) in homeTemplate" :key="item.id">
          <!-- 滑动宫格 -->
          <huixuan-classify v-if="item.type === 'menu'" :list="item.content.list" ></huixuan-classify>
          <!-- 轮播 -->
          <sh-banner
              v-if="item.type === 'banner' && index !== 0"
              :Px="item.content.x"
              :Py="item.content.y"
              :borderRadius="item.content.radius"
              :height="300"
              :list="item.content.list"
          ></sh-banner>
<!--          限时秒杀-->
          <view class="activity" v-if="item.type=='miaosha'"  style=" background: url('https://duomi.bigchun.com/images/Frame111.png') no-repeat!important;background-size: 100%;" >
            <huixuan-exercise class="seckill-card-xianshi" :title="'限时秒杀'" :detail="item.content"></huixuan-exercise>
          </view>
<!--          折上返券-->
          <view class="activity" v-if="item.type=='zheshang'"  style="  background: url('https://duomi.bigchun.com/images/Frame110.png') no-repeat!important;background-size: 100%;" >
            <huixuan-exercise class="seckill-card-dazhe" :title="'折上返券'" :detail="item.content"></huixuan-exercise>
          </view>
<!--          预售专区-->
          <view class="activity"v-if="item.type=='yushou'" style=" background: url('https://duomi.bigchun.com/images/Frame109.png') no-repeat!important;background-size: 100%;" >
            <huixuan-exercise class="seckill-card-xianshou" :title="'预售专区'" :detail="item.content"></huixuan-exercise>
          </view>


        </block>
      </view>

      <search-data
          :enable="enable"
          :title="'惠选首页'"
      ></search-data>

      <!-- 悬浮按钮 -->
      <!--			<shopro-float-btn></shopro-float-btn>-->
      <!-- 连续弹窗提醒 -->
      <shopro-notice-modal v-if="showPrivacy && isLogin"></shopro-notice-modal>

    </view>

  </view>
</template>

<script>
import shBanner from './components/sh-banner.vue';
import shGridSwiper from './components/sh-grid-swiper.vue';
import shHotGoods from './components/sh-hot-goods.vue';
import shAdv from './components/sh-adv.vue';
import shCoupon from './components/sh-coupon.vue';
import shSeckill from './components/sh-seckill.vue';
import shGroupon from './components/sh-groupon.vue';
import shRichtext from './components/sh-richtext.vue';
import shTitleCard from './components/sh-title-card.vue';
import shSearch from './components/sh-search.vue';
import shCategoryTabs from './components/sh-category-tabs.vue';

import homeHead from './index/home-head.vue';

// #ifdef MP-WEIXIN
import { HAS_LIVE } from '@/env';
import shLive from './components/sh-live.vue';
// #endif

import { mapMutations, mapActions, mapState, mapGetters } from 'vuex';
import HuixuanClassify from "../../components/huixuan-classify/huixuan-classify";
import HuixuanExercise from "../../components/huixuan-exercise/huixuan-exercise";
export default {
  components: {
    HuixuanExercise,
    HuixuanClassify,
    shBanner,
    shGridSwiper,
    shGroupon,
    shHotGoods,
    shAdv,
    shCoupon,
    shSeckill,
    shRichtext,
    shTitleCard,
    shSearch,
    shCategoryTabs,
    homeHead,
    // #ifdef MP-WEIXIN
    shLive
    // #endif
  },
  data() {
    return {
      // #ifdef MP-WEIXIN
      HAS_LIVE: HAS_LIVE,
      // #endif
      isRefresh: true,
      enable: false, //是否开启吸顶。
      isConnected: true, //是否有网
      showPrivacy: false, //是都有资格领取优惠券
      isScorll: false,
      homeTemplate: [
        {
          "id": 15424,
          "type": "menu",
          "category": "home",
          "name": "菜单组",
          "content": {
            "name": "",
            "style": 4,
            "list": []
          },
          "decorate_id": 1
        },
        {
          "id": 15423,
          "type": "banner",
          "category": "home",
          "name": "轮播图",
          "content": {
            "name": "",
            "style": 1,
            "height": 120,
            "radius": 10,
            "x": 20,
            "y": 10,
            "list": []
          },
          "decorate_id": 1
        },
        {
          "id": 15427,
          "type": "miaosha",
          "category": "home",
          "name": "秒杀",
          "content": {
            "id": 2,
            "name": "秒杀",
            "style": 1,
            "groupon_name": "秒杀",
            "team_num": "3"
          },
          "decorate_id": 1
        },
        {
          "id": 15428,
          "type": "zheshang",
          "category": "home",
          "name": "折上返券",
          "content": {
            "id": 2,
            "name": "折上返券",
            "style": 1,
            "groupon_name": "折上返券",
            "team_num": "3"
          },
          "decorate_id": 1
        },
        {
          "id": 15429,
          "type": "yushou",
          "category": "home",
          "name": "预售专区",
          "content": {
            "id": 2,
            "name": "预售专区",
            "style": 1,
            "groupon_name": "预售专区",
            "team_num": "3"
          },
          "decorate_id": 1
        },

      ],//惠选数据模板
    };
  },
  computed: {
    ...mapGetters(['isLogin']),
  },
  onPullDownRefresh() {
    this.init();
  },
  onPageScroll(e) {
    this.isScorll = e.scrollTop > 100 ? true : false;
  },
  onShow() {
    let that = this;
    if(this.isLogin){
      this.getCartList();
    }
    // 网络变化检测
    uni.onNetworkStatusChange(res => {
      this.isConnected = res.isConnected;
      res.isConnected && this.init();
    });
  },
  onHide() {
    this.enable = false;
  },
  onLoad() {
    this.init();
  },
  methods: {
    ...mapActions(['getCartList']),
    // 初始化
    init() {
      var that = this;
      that.isRefresh = false;
      that.$https( 'common.huixuan_template',
          {
            token: uni.getStorageSync("token"),
          }
      )
      .then(res => {
        if (res.code === 1) {
          uni.stopPullDownRefresh();
          that.isRefresh = true;
          that.homeTemplate.forEach((item,index)=>{
            if(item.type == 'banner'){
              item.content.list = res.data.lunbo;
            }
            if(item.type == 'menu'){
              item.content.list = res.data.cate;
            }
            if(item.type == 'miaosha'){
              item.content.list = res.data.miaosha;
            }
            if(item.type == 'zheshang'){
              item.content.list = res.data.zheshang;
            }
            if(item.type == 'yushou'){
              item.content.list = res.data.yushou;
            }
          })
          if(this.isLogin){
            this.ishaveYouhui();
          }

          console.log("==========homeTemplate",that.homeTemplate)
        }
      });
    },
    ishaveYouhui(){
      var that = this;
      that.$https( 'coupons.get',
          {
            token: uni.getStorageSync("token"),
          }
      )
      .then(res => {
        if (res.code === 1) {
          if(!res.data.is_get){
            that.showPrivacy = true;
          }
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
/deep/.cu-bar .content{
  margin:auto 20rpx;
  width: 450rpx;
}
/deep/.right-solt{
  margin-left: 35rpx;
  border-radius:6rpx ;
  padding: 6rpx 4rpx;
  .goshopcar{
    display: flex;
    flex-direction: column;
    align-items: center;
    //width: 200rpx;
    height: 100%;
    .gouwuche{
      font-size: 20rpx;
      height: 24rpx;
      line-height: 30rpx;
    }
  }
  .goqiandao{
    width: 54rpx;
    height: 52rpx;
  }
}
/deep/.u-content,/deep/.u-input{
  background: #F8F8F8;
}
/deep/.cu-bar{
  background: #FAEAEA!important;
  //height: 138rpx!important;
  z-index: 11000;
}
.template-box{
  //padding-top: 40rpx;
}
/deep/.cu-modal{
  z-index: 11700!important;
}
.activity{
  background-size: 100% 100%;
  margin: 22rpx 22rpx;
  padding: 10rpx 22rpx;
  border-radius: 28rpx;
}
</style>
